import React, { useEffect, useState } from "react";

function RenderInput() {
  const [color, setColor] = useState("blue");

  useEffect(() => {
    const observer = new MutationObserver((mutationList, observer) => {
      console.log("mutation");
      mutationList.forEach((mutation) => {
        console.log(mutation);
        // switch (mutation.type) {
        //   case "childList":
        //     /* 从树上添加或移除一个或更多的子节点；参见 mutation.addedNodes 与
        //        mutation.removedNodes */
        //     break;
        //   case "attributes":
        //     /* mutation.target 中某节点的一个属性值被更改；该属性名称在 mutation.attributeName 中，
        //        该属性之前的值为 mutation.oldValue */
        //     break;
        // }
      });
    });
    observer.observe(document.querySelector(".Mutation"), {
      attributes: true,
    });
  });

  return (
    <div>
      <div
        className="Mutation"
        onClick={() => {
          setColor("red");
        }}
        style={{ color }}
      >
        <div>Mutation</div>
      </div>
    </div>
  );
}

export default RenderInput;
